<template>
  <div>
    <div class="tab-title-box">
      <span class="tab-item">我的考试</span>
    </div>
    <div class="tab-content-box">
      <div class="class-ctx">
        <div class="card-exam-list clearfix">
          <div class="card-exam-item" v-for="item in examList" :key="item.id">
            <el-card style="width: 240px" shadow="hover">
              <template #header>
                <div class="card-header">
                  <span>所属课程：{{ item.courseExam.course.title }}</span>
                </div>
              </template>
              <div class="font-desc">题目数：{{ item.courseExam.questionCount }}</div>
              <div class="font-desc">总分：{{ item.paperScore }}</div>
              <div class="font-desc">交卷状态：{{ item.submitStatus }}</div>
              <div class="font-desc">时长：{{ item.courseExam.durationTime }}分钟</div>
              <div class="font-desc">开始时间：{{ item.createTime }}</div>
              <div class="font-desc">结束时间：{{ item.updateTime }}</div>
              <template #footer>
                <div style="margin-top: 10px; text-align: right">
                  <el-button :disabled="item.submitStatus===1" @click="startExam(item)" size="mini">继续考试</el-button>
                </div>
              </template>
            </el-card>
          </div>
        </div>
        <div style="text-align: center; padding: 10px 0" v-if="total>10">
          <el-pagination background layout="prev, pager, next"
                         :current-page="pageNum"
                         :page-size="pageSize"
                         :total="total"
                         @update:current-page="changePageNum"
                         @current-change="getMyExamList"/>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getMyExamList } from "@/api/u/exam"
import { mapState } from "vuex";
export default {
  name: "home-center",
  data() {
    return {
      pageNum: 1,
      pageSize: 10,
      total: 0,
      examList: []
    };
  },
  computed: {
    ...mapState({ userInfo: (state) => state.user }),
  },
  created() {
    this.getMyExamList()
  },
  methods: {
    changePageNum(val){
      this.pageNum = val
    },
    // 获取我的可成
    getMyExamList() {
      let param = {
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }
      getMyExamList(param).then((res) => {
        this.examList = res.data.list;
        this.total = res.data.total;
      });
    },
    startExam(id){
      this.$router.push(`/examAnswerDetail?id=${id}`);
    }
  },
};
</script>
<style lang="scss" scoped>
.tab-title-box {
  display: flex;
  height: 51px;
  line-height: 51px;
  border-bottom: 1px solid #e2e2e2;
  background: #ebeef5;
  .tab-item {
    margin-left: 40px;
    color: $theme-color-font;
    line-height: 51px;
    height: 52px;
    min-width: 65px;
    padding: 0 15px;
    text-align: center;
    cursor: pointer;
    font-size: 18px;
    float: left;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-top: 2px solid $theme-color-font;
    background: #fff;
  }
}
.tab-content-box {
  background: #fff;
}
.card-exam-item {
  float: left;
  width: 240px;
  padding: 20px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px 0px,
  rgba(0, 0, 0, 0.1) 0px 0px 1px 0px;
  transition: all 0.1s;
}
.font-desc {
  font-size: 14px;
  color: #9b9b9b;
}
</style>